<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="../../../js/bristle-utils.js"></script>
  <script type="text/javascript" src="../../../js/bristle-controller.js"></script>
  <script type="text/javascript" src="../../../js/bristle-serialization.js"></script>
  <script type="text/javascript" src="../../../js/bristle-core.js"></script>
  <script type="text/javascript" src="../../../js/trimpath-template-1.0.38.js"></script>

  <script type="text/javascript">
    var config = {
      //  serverUrl: "ws://localhost:8765/websocket",
      OnOpen: function(event) {
        $('#status').text("The WebSocket Connection Is Open.");
      },
      OnClose: function(event) {
        $('#status').text("The WebSocket Connection Is Closed.");
      }
    };
    var client = Bristleback.newClient(config);
    var dataController = client.dataController;
    var sampleAction = dataController.getActionClass("sample");

    sampleAction.defineAction("hello")
      .setIncomingMessageHandler(function(message) {
      $('#status').text(message);
    });

    sampleAction.exceptionHandler.setDefaultExceptionHandler(function() {
      Bristleback.Console.log("[ERROR in SampleAction] Exception in hello action, this handler will return false and thus let default handlers run.");
      return false;
    });
    sampleAction.defineDefaultAction()
      .setIncomingMessageHandler(function(message) {
      $('#status').text("Default action response: " + message);
    });

    sampleAction.defineAction("getFactorials")
      .renderOnResponse("factorials-template", "#status", "factorials")
      .renderOnDefaultException("factorials-error-template", "#status", false)
      .renderOnException("factorialInputException", "factorials-wrong-input-template", "#status");

    dataController.exceptionHandler.setExceptionHandler("sample.NumberFormatException", function() {
      $('#age').css("border-color", "red");
      $('#status').text("Field age must be a number!");
      Bristleback.Console.log("Field age must be a number!");
      return true;
    });

    sampleAction.defineAction("userDetails").setIncomingMessageHandler(function(user) {
      alert("Its normal serwer message sent before response, user details:" + user.firstName + ":" + user.age);
    });


    function connect() {
      client.connect();
      Bristleback.Console.enableConsole();
    }

    function sendText() {
      var name = $('#fullName').val();
      var age = $('#age').val();
      $('#age').css("border-color", "");
      sampleAction.hello(name, age, Bristleback.CONNECTOR);
    }

    function sendDefault() {
      var age = $('#age').val();
      $('#age').css("border-color", "");
      sampleAction.executeDefault(Bristleback.CONNECTOR, {mapField: age});
    }

    function sayHelloWithCallback() {
      var name = $('#fullName').val();
      var age = $('#age').val();
      $('#age').css("border-color", "");
      var responseFunction = function(message) {
        alert("Action was invoked succesfully, " + message);
      };
      var callback = new Bristleback.controller.ActionCallback(responseFunction);
      callback.exceptionHandler.setDefaultExceptionHandler(function(actionMessage) {
        alert("exception callback");
        return true;
      });
      sampleAction.hello(name, age, Bristleback.CONNECTOR, callback);
    }

    function getFactorials() {
      var age = $('#age').val();
      $('#age').css("border-color", "");
      sampleAction.getFactorials(age);
    }

    function closeConnection() {
      client.disconnect("exit on demand");
    }


  </script>


  <title>Bristleback client version 0.2.0</title>
</head>
<body>
<div id="status">Disconnected. Click connect button to start playing.</div>
<br/>
<input type="button" onclick="connect()" value="Connect">
<input type="button" onclick="closeConnection()" value="Close connection">
<br>
<label>Your name
  <input type="text" id="fullName">
</label> <br>
<label>Your age
  <input type="text" id="age">
</label> <br>
<label>
  <input type="button" onclick="sendText()" value="Click hello world!">
</label>
<label>
  <input type="button" onclick="sendDefault()" value="Click default action!">
</label>
<label>
  <input type="button" onclick="sayHelloWithCallback()" value="Click default action!">
</label>
<label>
  <input type="button" onclick="getFactorials()" value="Get factorials">
</label>

<textarea id="factorials-template" style="display:none;" rows="1" cols="1">
  Factorials: <br>
  {for factorial in factorials}
  Factorial for number ${(parseInt(factorial_index)+1)}: ${factorial.age} <br>
  {/for}
</textarea>

<textarea id="factorials-error-template" style="display:none;" rows="1" cols="1">
  Some unexpected error with type "${exception.exceptionType}" occurred, content:
  ${Bristleback.utils.objectToString(exception.content)}
</textarea>

<textarea id="factorials-wrong-input-template" style="display:none;" rows="1" cols="1">
  Incorrect input ${exception.content}
</textarea>

</body>
</html>